<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul>
    <script>
      var ulele = document.querySelector("ul");
      function ajax1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            var arr = [{ name: "张三" }, { name: "李四" }, { name: "王五" }];
            resolve(arr);
            console.log(arr);
          }, 1000);
        });
      }

      function ajax2(arr2) {
        let agearr = [20, 23, 21];
        console.log(agearr);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            arr2.forEach(function (item, key) {
              item.age = agearr[key];
              var liele = document.createElement("li");
              // console.log(item.name, item.age);
              liele.innerHTML = `<span>${item.name}&nbsp&nbsp&nbsp&nbsp${item.age}</span>`;
              ulele.appendChild(liele);
            });
            resolve();
            console.log(arr2);
          }, 1500);
        });
      }
      async function fn() {
        try {
          var arr1 = await ajax1();
          await ajax2(arr1);
        } catch (err) {}
      }
      fn();
    </script>
  </body>
</html>
